<#assign ctx=request.contextPath />



<html>
<head>
    <meta charset="UTF-8">
    <title>E-XPay聚合支付中心</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <script src="http://cdn.chiship.cn/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://cdn.chiship.cn/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
    <script src="http://cdn.chiship.cn/layer/3.1.1/layer.js"></script>
    <style>

        body, html {
            padding: 0px;
            margin: 0px;
        }
        body, button, input, select, textarea {
            font: 12px/1.5 tahoma,arial,Hiragino Sans GB,\5b8b\4f53;
        }
        ol, ul {list-style: none;}
        a, ins {text-decoration: none;}
        #header {height: 50px;margin-bottom: 1px;}
        .header-container { width: 950px;height: 100%; margin: 0 auto;}
        .header-title {float: left;padding-top: 10px;padding-right: 15px;}
        #header .logo {width: 88px;height: 30px;float: left;position: relative;font: normal 24px/30px Microsoft YaHei,SimSun;text-align: center;margin-right: 10px;}
        #header .logo-title {font: normal 18px/26px Microsoft YaHei,SimSun;float: left; padding-left: 10px; margin-top: 2px;}
        .header-right {float: right;margin-top: 17px;overflow: hidden;}
        .header-right li { padding: 0 10px;margin-right: -1px;float: left;background-repeat: no-repeat; background-position: 100%;}
        /**
        #header .logo s {position: absolute;top: 0;left: 0;width: 100%; height: 100%; background-repeat: no-repeat;background-image: url(https://t.alipayobjects.com/images/rmsweb/T13IFgXjlaXXXXXXXX.png);}
        */
        #content {margin: 0 auto;width: 950px;margin-bottom: 20px;}
        #content { margin-bottom: 0;padding-bottom: 1px;margin-top: 0;}
        .main-container { padding: 20px;min-height:500px;}
        .order-wrapper {position: relative;z-index: 10;line-height: 1.8em;min-height: 86px;_height: 86px; padding: 10px 0 11px 10px;}
        .order-seller, .order-title { height: auto; line-height: 25px; }
        .order-title {  width: 600px;  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;  margin-top: 15px; }
        .order-amount {position: absolute; right: 27px;top: 30px; text-align: right;}
        .order-real-amount em {font-weight: 700;font-size: 22px;font-style:normal;margin-right: 3px}
        .payment-way{overflow: hidden;}
        .payment-way .caption{float: left;font-size: 18px;}
        .payment-way .wrapper{float: left;width: 580px;}
        .payment-way .way-list{margin: 0;padding: 0;display: flex;flex-wrap: nowrap;width:100%;}
        .payment-way .way-item{width:100px;height:80px;padding:10px 0;margin:0 20px;text-align: center;font-size: 18px;cursor:pointer;border-radius: 5px;transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s;-o-transition: all 0.5s;}
        .payment-way .way-item .logo{width: 50px;}
        .payment-way .way-item .title{margin: 0;}
        .payment-qrcodes{width: 760px;}/*display: none;*/
        .qrcode-item{width: 250px;text-align: center;margin: 45px auto;padding: 20px 0;border: 1px solid #ddd;}
        .qrcode-item #qrcode{width: 200px;height:200px;margin: 5px auto}
        .qrcode-item p{margin: 0;padding: 0;font-size: 14px;font-family: Microsoft YaHei,SimSun;letter-spacing: 1px;}
        #footer{position: absolute;bottom: 0;width: 100%;}
        #footer p{text-align: center;font-size: 14px;line-height:35px;margin: 0;}
        .layout{width: 100%;height:100%;background: #eff0f1;}
        .layout #header{background-color: #fff; border-bottom: 1px solid #d7d8d8;box-shadow: 0 1px 1px #ddd;}
        .layout #header .logo-title{border-left: 1px solid gray;color: #1a1a1a;}
        .layout .header-right a, .layout .header-right a:visited {color: #333; }
        .layout a, a:hover, .layout a:visited { color: #0ae;}
        .layout a:hover, .layout a:link { color: #0ae; }
        .layout #content{background: #fff;}
        .layout .main-container {border-bottom: 3px solid #a6a6a6;}
        .layout .order-wrapper{border-bottom: 3px solid #b3b3b3;}
        .layout .order-real-amount em {color: #ff8208;}
        .layout .payment-way .way-item{color: #000;border: 2px solid #eee;}
        .layout .payment-way .way-item:hover{border: 2px solid #1296DB;}
        .layout .payment-way .way-item.on{border: 2px solid #1296DB;}
        .layout .qrcode-item p span{color:#f00;}
        .layout #footer{background: #1a1a1a;}
        .layout #footer p{color: #fff;}

        .colorVersion{width: 100%;height:100%;background: #fff;}
        .colorVersion #header{background-color: #448AFF; color:#fff;border-bottom: 1px solid #d7d8d8;box-shadow: 0 1px 1px #ddd;}
        .colorVersion #header .logo-title{border-left: 1px solid gray;color: #fff;}
        .colorVersion .header-right a, .layout .header-right a:visited {color: #ef7; }
        .colorVersion a, a:hover, .layout a:visited { color: #ef7;}
        .colorVersion a:hover, .layout a:link { color: #ef7; }
        .colorVersion #content{background: #fff;}
        .colorVersion .main-container {border-bottom: 2px solid #448AFF;}
        .colorVersion .order-wrapper{border-bottom: 2px solid #448AFF;}
        .colorVersion .order-real-amount em {color: #ff8208;}
        .colorVersion .payment-way .way-item{color: #000;border: 2px solid #eee;}
        .colorVersion .payment-way .way-item:hover{border: 2px solid #1296DB;}
        .colorVersion .payment-way .way-item.on{border: 2px solid #1296DB;}
        .colorVersion .qrcode-item p span{color:#f00;}
        .colorVersion #footer{background: #fff;}
        .colorVersion #footer p{color: #333;}
    </style>
</head>
<body>
<div class="colorVersion">
    <div id="header">
        <div class="header-container fn-clear">
            <div class="header-title">
                <span class="logo">E-XPay<s></s></span>
                <span class="logo-title">聚合支付收银台</span>
            </div>
            <ul class="header-right">
                <li class="account-id">聚合支付商户：<span id="J-accountId">${merchantUser.company}</span></li>
                <li><a target="_blank" seed="pay-by-standard" href="https://expect-x.net">加入E-XPay</a></li>
                <li>唯一热线：0531-89652525</li>
            </ul>
        </div>
    </div>
    <div id="content">
        <div class="order-wrapper">
            <div class="order-title"> ${orderHeader.orderName!}</div>
            <div class="order-seller" style="font-weight: bolder;">订单号:${orderHeader.merchantOrderId!}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;收款方:${merchantUser.company}</div>
            <div class="order-seller">商品名称：${orderHeader.orderName!}</div>
            <div class="order-seller">商品描述：${orderHeader.orderDesc!}</div>
            <div class="order-seller">交易金额：${orderHeader.grandTotal!}元</div>
            <#if orderHeader.orderStatus !='0'>
                <#assign orderStatus=""/>
                <#if orderHeader.orderStatus=='1'>
                    <#assign orderStatus="已支付"/>
                </#if>
                <div class="order-seller">交易状态：${orderStatus}</div>
            </#if>
            <div class="order-amount">
                <div class="order-real-amount">
                    <em class="">${orderHeader.grandTotal!}</em>元
                </div>
            </div>
        </div>
        <#if orderHeader.orderStatus =='0'>
                <div id="J-payMethod" class="main-container">
                <div id="J-rcPaymentDisabled"></div>
                <div class="payment-way">
                    <label class="caption">支付方式：</label>
                    <div class="wrapper">
                        <ul class="way-list">
                            <#list merchantPaymentConfigs as merchantPaymentConfig>
                                <#assign channelMethod=merchantPaymentConfig.channelAttr />
                                <li class="way-item" id="channel${merchantPaymentConfig.id}" data-id="${merchantPaymentConfig.id}" data-name="${channelMethod}">
                                    <#if channelMethod=='alipay_qr'>
                                        <img class="logo" src=""/>
                                        <p class="title">支付宝</p>
                                    </#if>
                                    <#if channelMethod=='wx_pub_qr'>
                                        <img class="logo" src=""/>
                                        <p class="title">微信支付</p>
                                    </#if>
                                </li>
                            </#list>
                        </ul>
                    </div>
                </div>
                <div class="payment-qrcodes">
                    <div class="qrcode-item">
                        <p>扫码支付</p>
                        <div id="qrcode"></div>
                        <p>使用<span id="appName"></span>APP扫码完成支付</p>
                    </div>
                </div>

                <script>
                    var bret=null;
                    $(function(){
                        var channelId=$('.way-item:nth-child(1)').attr('data-id');
                        if(channelId){
                            generalQrCode(channelId);
                        }
                        $(".way-item").click(function(e){
                            var tagId = e.currentTarget.id;
                            $(this).siblings().removeClass("on");
                            $(this).addClass("on");
                            channelId=$(this).attr('data-id');
                            if(channelId){
                                generalQrCode(channelId);
                            }
                        })
                    });

                    function generalQrCode(channelId) {
                        console.log($("#channel"+channelId).attr("data-name"))
                        layer.msg('支付码生成中...', {
                            icon: 16
                            ,shade: 0.01
                        });
                        if (bret){
                            clearInterval(bret);
                        }
                        $("#qrcode").empty();
                        $.ajax({
                            url:"${HOST!}pay/"+channelId+"/${orderHeader.merchantOrderId!}/generalQrCode",
                            type:"GET",
                            dataType:"JSON",
                            success:function(data){
                                layer.closeAll()
                                if(data.success){
                                    jQuery('#qrcode').qrcode({
                                        text: data.data.qrCode,
                                        width: 200,
                                        height: 200,
                                        colorDark : "#000000",
                                        colorLight : "#ffffff",
                                    });

                                    bret=setInterval(function () {
                                        $.ajax({
                                            url:"${HOST!}pay/${orderHeader.orderId!}/orderStatus",
                                            type:"GET",
                                            dataType:"JSON",
                                            success:function(data1){
                                                if(data1.success){
                                                    if(data1.data!='0'){
                                                        clearInterval(bret);
                                                        layer.confirm('支付完成？', {
                                                            btn: ['成功','失败'] //按钮
                                                        }, function(){
                                                            window.location.reload()
                                                        }, function(){
                                                            window.location.reload()
                                                        });
                                                    }

                                                }else{
                                                    layer.msg(data1.message)
                                                }
                                            },
                                            error:function(err){
                                                console.log(err)
                                            }
                                        });
                                    },1000*3)



                                }else{
                                    layer.msg(data.message)
                                }
                            },
                            error:function(err){
                                console.log(err)
                            }
                        });

                    }

                </script>
            </div>
        </#if>
    </div>
    <div id="footer">
        <p>©2018 山东映湃数据科技有限公司. 鲁ICP备18027941号  </p>
    </div>
</div>

</body>
</html>
